<template>
    <div>
      <h2>编辑会员</h2>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/AdminMain/home">主页</el-breadcrumb-item>
        <el-breadcrumb-item to="/AdminMain/memberManage">会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>编辑会员</el-breadcrumb-item>
      </el-breadcrumb>
  
      <el-card style="margin-top: 20px;">
        <el-form :model="form" :rules="rules" ref="editForm" label-width="120px">
          <el-form-item label="会员账号/卡号">
            <el-input v-model="form.memberAccount" readonly></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="memberName">
            <el-input v-model="form.memberName"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.memberPassword" readonly></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="memberGender">
            <el-input v-model="form.memberGender"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="memberAge">
            <el-input v-model="form.memberAge"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="memberPhone">
            <el-input v-model="form.memberPhone"></el-input>
          </el-form-item>
          <el-form-item label="身高">
            <el-input v-model="form.memberHeight"></el-input>
          </el-form-item>
          <el-form-item label="体重">
            <el-input v-model="form.memberWeight"></el-input>
          </el-form-item>
          <el-form-item label="购买课时">
            <el-input v-model="form.cardClass"></el-input>
          </el-form-item>
          <el-form-item label="剩余课时">
            <el-input v-model="form.cardNextClass"></el-input>
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  
  const router = useRouter()
  const route = useRoute()
  
  // 假设 URL 参数中带 memberAccount
  const memberAccount = route.query.memberAccount || ''
  
  const form = ref({
    memberAccount: '',
    memberName: '',
    memberPassword: '',
    memberGender: '',
    memberAge: '',
    memberPhone: '',
    memberHeight: '',
    memberWeight: '',
    cardClass: '',
    cardNextClass: ''
  })
  
  const rules = {
    memberName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    memberGender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
    memberAge: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
    memberPhone: [
      { required: true, message: '请输入联系方式', trigger: 'blur' },
      {
        pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
        message: '手机号码格式不正确',
        trigger: 'blur'
      }
    ]
  }
  
  const editForm = ref(null)
  
  // 加载会员数据
  const loadMember = () => {
    axios.get('/server/member/selMemberByMemberAccount', {
      params: { memberAccount: memberAccount }
    })
      .then(response => {
        const res = response.data
        if (res.code === 200 && res.data) {
          form.value = res.data
        } else {
          ElMessage.error('获取会员信息失败')
        }
      })
      .catch(() => {
        ElMessage.error('请求失败')
      })
  }
  
  onMounted(() => {
    if (!memberAccount) {
      ElMessage.error('缺少会员账号参数')
      router.push('/AdminMain/MemberManager')
    } else {
      loadMember()
    }
  })
  
  const onSubmit = () => {
    editForm.value.validate((valid) => {
      if (valid) {
        axios.put('/server/member/update', form.value)
          .then(response => {
            const res = response.data
            if (res.code === 200) {
              ElMessage.success('修改成功')
              router.push('/AdminMain/SelMemberByCard')
            } else {
              ElMessage.error(res.message || '修改失败')
            }
          })
          .catch(() => {
            ElMessage.error('请求失败')
          })
      }
    })
  }
  </script>
  